<template>
	<view class="detail">
		<view class="top">
			<video  id="myVideo" :enable-play-gesture='true' @fullscreenchange="fullscreenchange" @timeupdate="timeupdate"
				danmu-btn="true" :danmu-list="danmuList" vslide-gesture="true"  enable-danmu="true"
			:direction="-90" 	:src="detail.viede_address ? detail.viede_address:''"></video>
		</view>
		<template v-if="detail  && recommendlist">
			<view class="middle">
				<view class="left">
					<u-tabs :inactiveStyle="{color:'#c2d5ff'}" :activeStyle="activeStyle" :current="current"
						@click="uchange" :lineColor="`url(${lineBg}) 100% 100%`" lineWidth="60rpx" lineHeight="15rpx"
						:list="list"></u-tabs>
					<text>{{total}}</text>
				</view>
				<view class="right">
					<text style="font-size: 25rpx;color: #c2d5ff;">颜色</text>
					<view class="checkcolor" @click="checkcolors" :style="{'background-color':`${surecolor}`}">

					</view>
					<u-input color="#c2d5ff" :customStyle="{width:'300rpx'}" fontSize="10" placeholder=" "
						:clearable="true" border="surround" prefixIcon="edit-pen-fill" shape="circle" v-model="value">
						<template slot="suffix">
							<u-button @click="send" type="success" size="mini" :plain="true" text="发送"></u-button>
						</template>
					</u-input>
				</view>
			</view>

			<view :style="[styles]" class="buttom" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
				<view class="buttom_left">
					<view class="top">
						<u-avatar :src="avatar" @click="otherinfo"></u-avatar>
						<text
							:style="{color: 'red',margin:'5rpx','font-weight':'800',margin:'20rpx 0'}">{{nickname}}</text>
						<u-button v-if="isself" @click="follow" :customStyle="{width:'140rpx',height:'35rpx'}"
							class="gz" :color="isfollow? '#fab6b6':'#A6A6A6' " type="primary" shape="circle"
							:text="gzinfo ? '关注':'√已关注'"></u-button>
						<view class="" v-else style="color: hotpink;font-size: 25rpx;font-family: '楷体';">
							我的作品
						</view>

					</view>
					<view class="btn_middle">
						<view class="middle_top">
							<text class="title">{{detail.title}}：</text>
							<text style="font-family: 'YouYuan';">{{detail.content}}</text>
						</view>
						<view class="middle_center">
							<view>
								<u-icon name="eye" color="#848484" size="20"></u-icon>
								<text>{{detail.view_count}}</text>
							</view>
							<view>
								<u-icon name="chat" color="#848484" size="20"></u-icon>
								<text>{{total}}</text>
							</view>
							<view>
								{{datetime}}
							</view>
						</view>
						<view class="middle_bottom">
							<view class="islike" @click="islike">
								<u-icon name="heart-fill" :color="like? 'red':''" size="70rpx"></u-icon>
								<text>{{likes}}</text>
							</view>
							<view class="islike" @click="dislike">
								<u-icon name="heart-fill" :color="dslike? 'red':''" size="70rpx"></u-icon>
								<text>{{disslikes}}</text>
							</view>
						</view>
						<view class="title">
							<text>为你推荐</text>
						</view>
						<view class="other" v-show="recommendlist.length">

							<view v-for="item in recommendlist" :key="item._id">
								<post-item :item="item"></post-item>
							</view>


						</view>
					</view>

				</view>
				<view class="right">

					<view class="replays">
						<scroll-view @scrolltolower="scrolltolower" scroll-top="true" :scroll-y="true" class="scroll-Y">
							<view v-for="item in commentlist" :key="item._id">
								<reply-item :repleyid="repleyid" :video_id="video_id" @golandlord="golandlord"
									:item="item"></reply-item>
							</view>
							<u-loadmore :status="isloading" />
						</scroll-view>
					</view>
					<view class="replaysent" @click="showcom">
						互动一下吧~~

					</view>

					<!-- 弹出层 -->

					<view class="test" v-if="showcomment">
						<view class="top">
							发表评论
						</view>
						<view class="centent">
							<u--textarea color="#c2d5ff" maxlength="50" count v-model="videocomment"
								placeholder="说点什么吧~~~"></u--textarea>
						</view>
						<view class="buttom">
							<u-button @click="sendvideocomment" type="success" size="mini" :plain="true"
								text="发送"></u-button>
						</view>
					</view>
					<view class="test2" v-show="landlord">
						<landlord @uppdatatotal="uppdatatotal" @getnumber="tests" :info="twolandlordinfo"
							:user_id='user_id' :video_id="video_id" @cancles="cancels">
						</landlord>
					</view>
				</view>
			</view>
			<u-popup :show="checkcolor" @close="canclecolor" :closeOnClickOverlay="true">
				<view class="checkcolor" style="height: 22vh;">
					<view class="top">
						<button @click="sencolor"
							:style="{width:'15%','font-size':'25rpx',height:'5vh','background-color': `${surecolor}`,color:'#eee'}">选择</button>
					</view>


					<view class="box">
						<view :class="{active:index==iscolor}" class="othercolor" @click="upcolor(index,item.color)"
							v-for="(item,index) in datacolor" :key="item.id"
							:style="{height: '50rpx',width:' 50rpx','background-color':`${item.color}`,display:'flex'}">

							<view v-if="index==iscolor" style="text-align: center;">
								<u-icon name="checkmark" color="#fff" size="20"></u-icon>
								
							</view>

						</view>

					</view>
				</view>
			</u-popup>
		</template>
		<view v-else>
			<u-skeleton rows="6" title loading></u-skeleton>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import {
		formatDate
	} from "@/utils/time.js"
	import {
		repeat
	} from "@/utils/outrepeat.js"
	const db = uniCloud.database()
	import {
		randomNum
	} from '@/utils/randomNum.js'
	let currentX = 0;
	let danmuTime = 1;
	export default {

		data() {
			return {
				//确认选择
				surecolor: '#DCC6E0',
				//选择颜色
				iscolor: 0,
				//颜色列表
				datacolor: [{
						color: '#DCC6E0',
						id: 0
					}, {
						color: '#FFC857',
						id: 1
					},
					{
						color: '#A8DADC',
						id: 2
					},
					{
						color: '#E63946',
						id: 3
					},
					{
						color: '#FFC0CB',
						id: 4
					},
					{
						color: '#76B6EA',
						id: 5
					},
					{
						color: '#4F6D7A',
						id: 6
					},

					{
						color: '#F9F871',
						id: 7

					},
					{
						color: '#D2B4DE',
						id: 8
					},
					//----
					{
						color: '#000000',
						id: 9
					},
					{
						color: '#86E57F',
						id: 10
					},
					{
						color: '#A9D9D2',
						id: 11
					},

					{
						color: '#7C9FB0',
						id: 12

					},
					{
						color: '#0A2A3A',
						id: 13
					},

					{
						color: '#FF5722',
						id: 14
					},

					{
						color: '#5C7A29',
						id: 15
					},
					{
						color: '#9F7A49',
						id: 16
					},
					{
						color: '#a66cff',
						id: 17
					}

				],
				isfollow: true,
				gzinfo: true,
				//是否是自己的文章
				isself: true,
				detail: '',
				//弹幕
					
				danmuList: [],
				current: 0,
				activeStyle: {
					color: "#F08080",
					fontSize: "30rpx",
					fontWeight: '800'
				},
				list: [{
						name: "介绍",
						current: 0
					},
					{
						name: "评论",
						current: 1
					}
				],
				lineBg: '',
				value: "",
				positional: {
					pagex: 0,
					pagey: 0
				},
				query: {},
				styles: {
					transform: `translateX(0px)`,
				},
				//推荐列表
				recommendlist: [],
				//点赞样式
				like: false,
				dslike: false,
				//文章id
				video_id: "",
				//当前用户的id
				user_id: '',
				//like,num
				likes: 0,
				disslikes: 0,
				//回复视频的评论
				videocomment: '',
				//控制底部弹出
				showcomment: false,
				current: 0,
				commentlist: [],
				//评论加载中  nomore没有了
				isloading: 'loading',
				//翻页过滤
				skp: 0,
				//评论数量
				total: 0,
				stop: false,
				newpush: false,
				landlord: false,
				//二级回复楼主信息
				twolandlordinfo: {},
				//二级品论数量
				commentnumbers: 0,
				//回传评论id
				commentid: '',
				//我关注的人,
				me_like: [],
				//关注我的
				like_me: [],
				//给reply组件
				repleyid: '',
				checkcolor: false,
				danmuinfo: {
					text: '',
					time: 1,
					color: ''
				}
			}
		},
		onLoad(e) {
			this.user_id = uniCloud.getCurrentUserInfo().uid
			console.log(uniCloud.getCurrentUserInfo().uid,"我的")
			this.video_id = e._id
			this.getdetail(e._id)
			//获取推荐
			this.recommend()
			//获取评论数量
			this.getcommentnumber()
			//获取点赞数量
			this.getlikenumber()
			//获取关注信息
			this.getislike(this.video_id)
			//弹幕列表
			this.loadingdanmuylist()
		},
		onShow() {

		},
		beforeDestroy() {
			currentX=0
	
		},
		computed: {
			nickname() {
				if (this.detail.user_id) {
					return this.detail.user_id[0].nickname

				} else {
					return ''
				}
			},
			avatar() {
				if (this.detail.user_id) {
					return this.detail.user_id[0].avatar

				}
			},
			datetime() {
				if (this.detail.publish_date) {
					return formatDate(this.detail.publish_date, 1)
				} else {
					return formatDate(0)
				}
			},
		},

		mounted() {
			// this.getfollow()
		},
		onReady: function(res) {
		    this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			//他人详情页
			otherinfo(){
				console.log(this.work_info,'info')
				uni.navigateTo({
					url:`/pages_self/other_info/other_info?id=${this.detail.user_id[0]._id}`
				})
			},
			sencolor() {
				this.checkcolor = false

			},
			upcolor(index, color) {
				this.iscolor = index
				this.surecolor = color
				console.log(this.surecolor)
			},
			//关闭颜色选择
			canclecolor() {
				this.checkcolor = false
			},
			checkcolors() {
				// 颜色选择
				this.checkcolor = true
			},
			fullscreenchange(e) {
				console.log(e)
				e.detail = {
					fullScreen: true,
					direction: 'horizontal'
				}
			},
			timeupdate(e) {
				// console.log(e.detail, "chufa")
				danmuTime = Math.ceil(e.detail.currentTime)
				console.log(danmuTime)
			},
			async send(e) {
				if (this.value.trim() == "") {
					uni.showToast({
						title: "弹幕不能为空",
						icon: 'none'
					})
					return;
				}
				this.videoContext.sendDanmu({
				    text: this.value,
				    color: this.surecolor,
					time:danmuTime
				});
				let obj = {
					text: this.value,
					time: danmuTime,
					color: this.surecolor
				}
				let temp = []
				temp.push(obj)
				this.value=''
				this.getdanmulist().then(async res => {
					if (res.result.data.length == 0) {
						// this.danmuList=[...this.danmuList,...temp]
						await db.collection('danmuList').add({
							'video_id': this.video_id,
							danmuList: temp
						})
					} else {
						let newarr = [...this.danmuList, ...temp]
						// this.danmuList=[...this.danmuList,...temp]
						await db.collection('danmuList').where({
							'video_id': this.video_id
						}).update({
							danmuList: newarr
						}).then(res=>{
							
						})
					}

				})

			},
			//获取弹幕列表
			async getdanmulist() {
				return await db.collection("danmuList").where({
					'video_id': this.video_id
				}).get()
			},
			//加载获取弹幕列表
			async loadingdanmuylist() {
				this.getdanmulist().then(res => {
				
					if (res.result.data.length != 0) {
						
						this.danmuList = [...res.result.data[0].danmuList]
					
					}
				})
			},
			//导航栏切换
			uchange(e) {

				//0介绍，1评论
				if (e.current == 1) {
					currentX = uni.getWindowInfo().windowWidth
					this.styles.transform = `translateX(-${uni.getWindowInfo().windowWidth}px)`
					if (this.commentlist.length == 0) {
						this.getcommentinfo()
					}
				} else {
					this.styles.transform = `translateX(${0}px)`
					currentX = 0
				}
			},
			//点击屏幕时将当前点击位置赋值给 pagex
			touchstart(e) {
			console.log(currentX,'奠基石')
				if (currentX < (uni.getWindowInfo().windowWidth / 2)) {
					this.positional.pagex = e.touches[0].pageX
				} else {
					this.positional.pagex = e.touches[0].pageX + uni.getWindowInfo().windowWidth
				}

			},
			//滑动屏幕时改变相应transform的值
			touchmove(e) {

				currentX = this.positional.pagex - e.touches[0].pageX
				if (currentX < 30 || currentX > uni.getWindowInfo().windowWidth - 30) {
					return
				}
				if (currentX > 0 && currentX < uni.getWindowInfo().windowWidth) {
					this.styles.transform = `translateX(-${currentX}px)`
				}
			},
			//手指离开屏幕时
			touchend(e) {
				console.log(e.changedTouches[0].pageY, uni.getWindowInfo().windowHeight - (uni.getWindowInfo()
					.windowHeight / 5))
				if (e.changedTouches[0].pageY < (uni.getWindowInfo().windowHeight - (uni.getWindowInfo().windowHeight /
						5)) - 33) {
					this.showcomment = false

				}
				this.styles.transition = "all 0.1s"
				if (currentX > (uni.getWindowInfo().windowWidth) / 2) {
					this.styles.transform = `translateX(-${uni.getWindowInfo().windowWidth}px)`
					this.current = 1
					if (this.commentlist.length == 0) {
						this.getcommentinfo()
					}
				} else {
					this.styles.transform = `translateX(${0}px)`
					this.current = 0
					this.landlord = false
				}
			},
			//getvideoinfo
			async getdetail(id) {
				let videoTemp = db.collection("video-articles").where(`_id=='${id}'`).field(
					'user_id,view_count,title,publish_date,content,viede_address').getTemp()
				let userTemp = db.collection('uni-id-users').field('_id,avatar,nickname').getTemp()
				await db.collection(videoTemp, userTemp).get().then(res => {

					this.detail = res.result.data[0]
					console.log(this.detail)
					this.getfollow()
				})
			},
			//推荐
			async recommend() {
				let arr = []
				let videoTemp = db.collection("video-articles").where(`_id!='${this.video_id}'`).field(
					'user_id,view_count,publish_date,content,avatar,article_status').getTemp()
				let userTemp = db.collection('uni-id-users').field('_id,avatar,nickname').getTemp()
				await db.collection(videoTemp, userTemp).orderBy('publish_date desc').get().then(res => {
					arr = res.result.data
					let a = randomNum(0, arr.length - 1)
					let b = randomNum(0, arr.length - 1)
					if (a == b) {
						b = arr.length - 1
					}
					this.$nextTick(() => {})
					this.recommendlist.push(arr[a])
					this.recommendlist.push(arr[b])

				})
			},
			//是否点赞
			async getislike(id) {
				await db.collection("like").where({
					'video-id': id
				}).get().then(res => {

					if (res.result.data.length != 0) {
						const likearr = res.result.data.map(item => {
							return item.userlike_arr
						})
						const dislikearr = res.result.data.map(item => {
							return item.userdislike_arr
						})
						if (likearr[0].indexOf(this.user_id) != -1) {
							this.like = true
						}
						if (dislikearr[0].indexOf(this.user_id) != -1) {
							this.dslike = true
						}
					}
				})
			},
			//用户点赞或取消
			islike() {
				if(!store.hasLogin){
					uni.showToast({
						title:'未登录',
						icon:"none"
					})
					return;
				}
				this.like = !this.like
				if (this.like) {
					this.likes = this.likes + 1

				} else {
					this.likes = this.likes - 1
				}
				if (this.dslike == true) {

					this.dslike = false
					this.disslikes = this.disslikes - 1
					this.cnaceldislike()
					// return;
				}
				this.cancellike()

			},
			//不喜欢
			dislike() {
				if(!store.hasLogin){
					uni.showToast({
						title:'未登录',
						icon:"none"
					})
					return;
				}
				this.dslike = !this.dslike
				if (this.dslike) {
					this.disslikes = this.disslikes + 1
				} else {
					this.disslikes = this.disslikes - 1
				}
				if (this.like == true) {

					this.likes = this.likes - 1
					this.like = false
					this.cancellike()
					// return;
				}
				this.cnaceldislike()
			},
			//取消喜欢
			cancellike() {
				let temp = []
				db.collection("like").where({
					'video-id': this.video_id
				}).get().then(res => {
					temp = res.result.data
					const newarr = temp.map(item => {
						return item.userlike_arr
					})
					if (temp.length == 0) {
						newarr.push(this.user_id)
						//没有人点过赞，创建新的
						this.creatlike(newarr)

					} else {
						if (newarr[0].indexOf(this.user_id) != -1 && this.like == false) {
							//如果当前用户点过赞
							//取消点赞
							newarr[0] = [...new Set(newarr[0])]
							let index = newarr[0].indexOf(this.user_id)
							newarr[0].splice(index, 1)


							this.canelOrconfirm(newarr[0])
						} else {
							// 如果当前用户没点过赞
							//点赞
							newarr[0].push(this.user_id)
							// console.log(newarr, '点赞')

							newarr[0] = [...new Set(newarr[0])]
							this.canelOrconfirm(newarr[0])
						}

					}
				})

			},
			//取消不喜欢
			async cnaceldislike() {
				let temp = []
				await db.collection("like").where({
					'video-id': this.video_id
				}).get().then(res => {
					temp = res.result.data
					//获取点赞用户数组
					const newarr = temp.map(item => {
						return item.userdislike_arr
					})
					if (temp.length == 0) {
						newarr.push(this.user_id)
						//没有人点过赞，创建新的
						this.creatlike(newarr, 1)

					} else {

						if (newarr[0].indexOf(this.user_id) != -1 && this.dslike == false) {
							//如果当前用户点过赞
							//取消点赞
							newarr[0] = [...new Set(newarr[0])]
							let index = newarr[0].indexOf(this.user_id)
							newarr[0].splice(index, 1)


							this.canelOrconfirm(newarr[0], 1)
						} else {
							// 如果当前用户没点过赞
							//点赞
							newarr[0].push(this.user_id)
							// console.log(newarr, '点赞')

							newarr[0] = [...new Set(newarr[0])]
							this.canelOrconfirm(newarr[0], 1)
						}

					}

				})
			},
			//创建点赞表
			async creatlike(userlist, type = 0) {
				// creatlike.createlike(this.video_id, userlist, type)
				let obj = {}
				obj['video-id'] = this.video_id
				if (type == 0) {
					//喜欢点赞
					obj['userlike_arr'] = userlist
					obj['userdislike_arr'] = []
				} else {
					//不喜欢
					obj['userdislike_arr'] = userlist
					obj['userlike_arr'] = []
				}
				await db.collection('like').add({
					...obj
				})
			},
			//取消或者确认
			async canelOrconfirm(userlist, type = 0) {
				// updatelike.updatelike(this.video_id, userlist, type)
				let obj = {}
				if (type == 0) {
					//喜欢点赞
					obj['userlike_arr'] = userlist
				} else {
					//不喜欢
					obj['userdislike_arr'] = userlist
				}
				await db.collection('like').where({
					'video-id': this.video_id
				}).update({
					...obj
				})


			},
			//获取点赞数量
			async getlikenumber() {
				await db.collection('like').where({
					'video-id': this.video_id
				}).get().then(res => {

					if (res.result.data.length != 0) {
						this.likes = res.result.data[0].userlike_arr.length
						this.disslikes = res.result.data[0].userdislike_arr.length
					}
				})
			},

			async sendvideocomment() {
				if (this.videocomment.trim() == '') {
					uni.showToast({
						title: '评论不能为空',
						icon: 'none',
						mask: true
					})
					return;
				}
				let obj = {
					video_id: this.video_id,
					user_id: this.user_id,
					comment_content: this.videocomment,
					comment_type: 0
				}
				uni.showLoading({
					title: '发布中',

				})
				this.showcomment = false
				this.newpush = true
				this.skp = 0
				await db.collection("criticism").add({
					...obj,
					like_count: []
				}).then(res => {

					this.$emit('criticism', {
						msg: '页面更新'
					})
					this.total = this.total + 1
					this.videocomment = ''
					this.getcommentinfo()

					uni.hideLoading()
				})


			},
			//获取评论信息
			async getcommentinfo() {
				const criticisTemp = db.collection("criticism").where({
					video_id: this.video_id,
					comment_type: 0
				}).field('user_id,comment_content,comment_date').getTemp()
				const userinfoTemp = db.collection("uni-id-users").field('_id,avatar,nickname').getTemp()
				await db.collection(criticisTemp, userinfoTemp).orderBy('comment_date desc').skip(this.skp).limit(3)
					.get().then(res => {
						const oldarr = this.commentlist
						if (this.newpush == true) {
							this.commentlist = repeat([...res.result.data, ...oldarr])
						} else {
							this.commentlist = repeat([...oldarr, ...res.result.data])
						}


						if (this.commentlist.length <= 3) {
							this.isloading = 'nomore'
						}
						if (res.result.data.length == 0) {
							this.isloading = "nomore"

						}
					})
			},
			showcom() {
				if(!store.hasLogin){
					uni.showToast({
						title:'未登录',
						icon:"none"
					})
					return;
				}
				this.showcomment = true
			},
			scrolltolower() {
				this.newpush = false
				this.isloading = "loading"
				this.skp = this.skp + 3
				this.getcommentinfo()

			},
			//页面加载获取品论数量
			async getcommentnumber() {
				await db.collection('criticism').where({
					video_id: this.video_id,
					comment_type: 0
				}).count().then(res => {
					this.total = res.result.total
				})
			},
			golandlord(e) {
				this.landlord = true

				this.twolandlordinfo = e

			},
			//取消二级回复
			cancels() {
				this.landlord = false
			},
			async publicgetfollow() {
				return db.collection('fans').where({
					'user_id': this.user_id
				}).get()
			},
			//获取关注信息
			getfollow() {
				if(!store.hasLogin){
					
					return;
				}
				this.publicgetfollow().then(res => {
					console.log(res, '粉丝')
					if (this.user_id == this.detail.user_id[0]._id) {
						this.isself = false
					}
					if (res.result.data[0] && res.result.data[0].like_other.indexOf(this.detail.user_id[0]._id) !=
						-1) {
						console.log('关注了')

						this.isfollow = false
						this.gzinfo = false
					} else {
						this.isfollow = true
						this.gzinfo = true
						console.log('饿米关注')
					}
				})
			},
			follow() {
				if(!store.hasLogin){
					uni.showToast({
						title:'未登录',
						icon:"none"
					})
					return;
				}
				// this.$emit("self_gz",this.isfollow)
				this.isfollow = !this.isfollow
				this.gzinfo = !this.gzinfo
				this.publicgetfollow().then(async res => {
					console.log(res, "dsdsadsassadsadsdaasdsadsad")
					let templike = []
					if (res.result.data.length == 0) {
						//未关注过任何人
						console.log('额了么')
						templike.push(this.detail.user_id[0]._id)
						await db.collection('fans').add({
							like_other: templike
						}).then(res => {
							console.log(res, "策划共")
						})


					} else {
						if (res.result.data[0].like_other.indexOf(this.detail.user_id[0]._id) != -1) {
							//关注过
							console.log('132')
							let index = res.result.data[0].like_other.indexOf(this.detail.user_id[0]._id)
							console.log(index,"。。",this.detail.user_id[0]._id)
							templike = res.result.data[0].like_other.splice(index, 1)
							console.log(templike, '9999')
							await db.collection('fans').where({
								'user_id': this.user_id
							}).update({
								like_other: res.result.data[0].like_other
							}).then(res => {
								console.log(res, '陈工')
							})
						} else {
							res.result.data[0].like_other.push(this.detail.user_id[0]._id)
							await db.collection('fans').where({
								'user_id': this.user_id
							}).update({
								like_other: res.result.data[0].like_other
							}).then(res => {

							})
						}
					}
				})
			},
			uppdatatotal(e) {
				this.repleyid = e

				console.log('ok', this.repleyid)
				// console.log(e.split('.'))
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes commnets {
		0% {
			transform: translateY(20vh);
		}

		100% {
			transform: translateY(-20vh);
		}
	}

	@keyframes landlord {
		0% {
			transform: translateY(65vh);
		}

		100% {
			transform: translateY(-65vh);
		}
	}

	.detail {
		color: #c2d5ff;
		box-sizing: border-box;

		.top {
			width: 100%;

			video {
				width: 100%;
				height: 30vh;
				padding: 0;
				margin: 0;
				/deep/ .uni-video-danmu-item{
					position: absolute;
					bottom: 0;
				}
			}
		}

		.middle {
			display: flex;
			justify-content: space-between;
			background-color: #283b65;
			padding: 10rpx;
			height: 7vh;
			align-items: center;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;

			}

			.right {
				height: 100%;
				display: flex;
				align-items: center;

				.checkcolor {
					margin-right: 15rpx;
					height: 60%;
					width: 60rpx;
					background-color: #eee;
					border-radius: 10rpx;
					font-size: 20rpx;
					color: #000;
					text-align: center;
				}
			}
		}

		.buttom {
			display: flex;
			width: 200vw;
			padding-top: 10rpx;
			box-sizing: border-box;
			height: 63vh;
			.buttom_left {
				width: 100vw;
				display: flex;
				flex-direction: column;
				// justify-content: space-around;

				.top {
					display: flex;
					flex-direction: column;
					align-items: center;
				
					// margin-bottom: 60rpx;
					// texy {
					// 	margin: 10rpx 0;
					// }
				}

				.btn_middle {
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					// justify-content: space-around;

					.middle_top {
						font-size: 25rpx;
							overflow: scroll;
							height: 8vh;
						.title {
							font-weight: 600;
							font-size: 30rpx;
							font-family: '楷体';
							// overflow: scroll;
						}
					}

					.middle_center {
						display: flex;
						// margin-top: 20rpx;
						// margin: 10rpx 0;
						justify-content: space-around;
						// padding: 10rpx;
						box-sizing: border-box;

						view {
							display: flex;
							font-size: 30rpx;
							// margin-right: 30rpx;

						}
					}

					.middle_bottom {
						display: flex;
						align-items: center;
						justify-content: space-around;
							
						// margin-top: 10rpx;
						// padding-top: 10rpx;
						.islike {
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
						}
					}

					.title {
						// margin-top: 10rpx;
						text-align: center;
						font-size: 40rpx;
						font-weight: 600;
						
					}

					.other {
						display: flex;
						justify-content: space-around;
						flex-wrap: wrap;
						align-items: center;

					}
				}
			}

			.right {
				width: 100vw;
				// height: 63vh;
				height: 100%;
				position: relative;

				.replays {
					width: 100vw;

					.scroll-Y {
						height: 57vh;
					}
				}

				.replaysent {
					position: absolute;
					bottom: 0;
					height: 5vh;
					width: 100vw;
					background-color: #283b65;
					line-height: 5vh;
					color: hotpink;
					text-align: center;
					border-radius: 30rpx;
					margin-top: 10rpx;
				}


				.test {
					border-top: 1px solid #eee;
					width: 100%;
					height: 25vh;
					background-color: #283b65;
					animation: commnets 0.5s;
					animation-fill-mode: forwards;
					display: flex;
					flex-direction: column;

					align-items: center;

					.top {
						box-sizing: border-box;
						text-align: center;

						padding: 10rpx 0;
						font-family: "楷体";
					}

					.centent {
						width: 100%;
						margin-top: 20rpx;
					}

					.buttom {
						width: 80%;
						margin-top: 30rpx;
						// margin-left: 30rpx;
					}
				}

				.test2 {
					width: 100%;
					animation: landlord 0.5s;
					animation-fill-mode: forwards;
						z-index: !important;

				}

			}
		}

		.checkcolor {
			background-color: #283b65;

			.top {
				margin-top: 10rpx;
				display: flex;
			}

			.box {
				width: 100vw;
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;

				.othercolor {
					border-radius: 10rpx;
					margin-left: 30rpx;
					margin-top: 30rpx;

					&.active {
					
						transition: all 0.2s;
			
						
						opacity: 0.7;
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #11265c;

	}

	page::-webkit-scrollbar {
		display: none;
	}
</style>